div{
    margin: 10px;
    padding: 5px;
}

img{
    width: 300px;
    height: 400px;
}

#father{
    border: 1px #000 solid;
    /*02.给父级设置高度防止边框塌陷*/
    /*height: 350px;*/
    /*03.overflow防止边框塌陷*/
    /*overflow: hidden;*/
}

.layer01{
    border: 1px #F00 dashed;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    /*float: left;*/
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    width: 200px;
    float: right;
}

/*04.after伪类防止父类边框塌陷*/
/*.clear:after{*/
    /*content: ''; !*在clear元素之后添加一个空内容*!*/
    /*display: block; !*把添加的内容转换成了块元素*!*/
    /*clear: both; !*清除这个元素所有的浮动*!*/
/*}*/

/*01.空div标签*/
.clear{
    clear: both;
    margin: 0px;
    padding: 0px;
}